<template>
    <!-- 评论输入框 -->
    <view class="input-box" v-if="commit">
        <textarea ref="input" class="marginBottom" confirm-type="发送" :show-confirm-bar="false" maxlength="200" v-model="val" placeholder-class="placClass" placeholder="说点什么吧" @confirm="send" :focus="commit" @blur="onBlur" @input="oninput" ></textarea>
        <view class="view-btn" @click="send">
            <!-- <button type="primary" @tap="send">发送</button> -->
            发送
        </view>
    </view>
</template>

<script>
export default {
    name: "review",
    props: ['commit'],
    data() {
        return {
            val: '',
        };
    },
    methods: {
        send() {
            // console.log('1111');
            // console.log(this.val,'val');
            this.$emit("submit", this.val);
            this.val = '';
        },
        onBlur(){
            this.$emit("onBlur", false);
        },
        oninput(){
            // console.log('111');
            if (this.val.length >= 200) {
                this.val = this.val.slice(0,200)
                console.log(this.val);
                this.$pv.msg("评论不能超过200个字");
            }
        }
    },
}
</script>

<style lang="scss">
.placClass{
    line-height: 1 !important;
    height: 42rpx !important;
    padding: 0 20rpx !important;
}
.input-box {
    height: 136rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 20rpx;
    border-top: 1px solid rgba(204, 204, 204, .4);
    background-color: #fff;
    display: flex;
    z-index: 999;
    
    textarea {
        border: 1px solid #EEEEEE;
        background: #EEEEEE;
        padding-left: 20rpx;
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        flex: 1;
        margin-right: 20rpx;
        color: #848484;
        resize: none; /* 阻止用户调整文本区域的尺寸 */
        overflow-y: hidden; /* 隐藏滚动条 */
        height: 42rpx; /* 初始高度为自动撑开 */
        border-radius: 8rpx;
    }
    .marginBottom{
        // margin-bottom: 30rpx;
    }
    .view-btn {
        width: 80px;
        text-align: center;
        line-height: 36px;
        height: 64rpx;
        background-color: #e2ac2e;
        color: #fff;
    }

    button {
        background-color: #e2ac2e;
        font-size: 14px;
    }
}
</style>
